<template>
	<view class="hot-container">
		<image class="logo" src="@/static/images/logo.png" mode="aspectFit"></image>
		<!-- 搜索框 -->
		<view class="search-box">
			<my-search placeholderText="uni-app"></my-search>
		</view>
		<!-- uniapp中进行父向子传递数据，遵循 vue v-bind 指令 ->  -->
		<!-- :tabData="tabData" === bind:tabData="{{tabData}}" -->
		<my-tabs :tabData="tabData" :defaultIndex="defaultIndex"></my-tabs>
	</view>
</template>

<script>
	import { getHotTabs } from "../../api/hot.js"; 
	export default {
		data() {
			return {
				placeholderText:"前端",
				tabData:[],
				defaultIndex:0
			};
		},
		// created:组件实现配置完成，但是Dom未曾渲染
		created() {
			this.loadHotTab()
		},
		methods:{
			/* 
			获取  热搜文章类型
			 */
			async loadHotTab(){
				const {data:res} = await getHotTabs()
				console.log("res====",res.list)
				this.tabData = res.list
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hot-container{
		background-color: $uni-bg-color;
		.logo{

			width: 100%;
			height: 80px;
		}
		.search-box{
			padding: 0 20px;
		}
	}


</style>
